<template>
  <svg t="1745991691612" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2695" :width="`${state.option.width}`" :height="`${state.option.height}`">
    <path d="M37.08878 650.115122h1067.707318v62.439024H37.08878z" :fill="`${cmap.iconColor[1]}`" p-id="2696">
    </path>
    <path d="M1028.120976 149.853659v599.414634h74.926829V149.853659a96.280976 96.280976 0 0 0-77.299512-92.534635v82.544391a22.602927 22.602927 0 0 1 2.372683 9.990244z" :fill="`${cmap.iconColor[1]}`"  p-id="2697">
    </path>
    <path d="M1048.97561 0H99.902439a99.902439 99.902439 0 0 0-99.902439 99.902439v824.195122a99.902439 99.902439 0 0 0 99.902439 99.902439h949.073171a99.902439 99.902439 0 0 0 99.902439-99.902439V99.902439a99.902439 99.902439 0 0 0-99.902439-99.902439z m24.97561 924.097561a24.97561 24.97561 0 0 1-24.97561 24.97561H99.902439a24.97561 24.97561 0 0 1-24.97561-24.97561V99.902439a24.97561 24.97561 0 0 1 24.97561-24.97561h949.073171a24.97561 24.97561 0 0 1 24.97561 24.97561z" :fill="`${cmap.iconColor[0]}`"  p-id="2698">
    </path>
    <path d="M606.532683 833.31122h-449.560976a32.093659 32.093659 0 0 0 0 64.187317h449.560976a32.093659 32.093659 0 1 0 0-64.187317zM991.781463 833.31122H799.219512a32.218537 32.218537 0 0 0-32.093658 32.093658A34.466341 34.466341 0 0 0 799.219512 897.498537h192.561951A34.466341 34.466341 0 0 0 1024 865.404878a32.218537 32.218537 0 0 0-32.093659-32.093658z" :fill="`${cmap.iconColor[1]}`"  p-id="2699">
    </path>
    <path d="M184.94439 443.816585h119.882927a28.846829 28.846829 0 0 0 26.973659-17.982439L424.585366 240.140488 607.406829 605.658537a34.466341 34.466341 0 0 0 26.973659 17.982439A28.846829 28.846829 0 0 0 661.853659 605.658537l122.380487-245.76 32.967805 65.935609a34.466341 34.466341 0 0 0 26.973659 17.982439h119.882927a29.970732 29.970732 0 1 0 0-59.941463H861.658537l-49.95122-101.77561a30.969756 30.969756 0 0 0-53.947317 0L634.380488 527.734634 451.559024 162.341463a30.969756 30.969756 0 0 0-53.947317 0L287.219512 383.875122h-102.275122a29.970732 29.970732 0 0 0 0 59.941463z" :fill="`${cmap.iconColor[2]}`"  p-id="2700">
    </path>
    <path d="M37.08878 694.946341h1067.707318v62.439025H37.08878z" :fill="`${cmap.iconColor[0]}`"  p-id="2701">
    </path>
  </svg>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts";
import {getColorFromLocal} from "../../../package/style/css.ts";
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const state=reactive({
  option:{
    height:10,
    width:20,
    left:10,
    top:10,
  },
  window:{
    height:1700,
    width:800,
  },
})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
  }
  getWH()
}
watch(()=>props.option,(newValue,oldValue)=>{
  setting()
},{immediate:true,deep:true})
window.addEventListener('resize',()=>{
  getWH()
})
function getWH(){
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  state.option.height=(props.option.height/100)*state.window.height
  state.option.width=(props.option.width/100)*state.window.width
}

const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
</script>

<style scoped>
.icon{
  position: absolute;
  left: v-bind(left);
  top:v-bind(top);
}
</style>
